<template>
<el-container class="analisis-container">
  <el-aside :width="isCollapse ? '64px' : '150px'">
    <div class="toggle-button" @click="toggleCollapse">|||</div>
    <el-menu :default-active="activeIndex" :collapse="isCollapse" :collapse-transition="false" router>
      <el-menu-item index="/forumManagement">
        <i class="el-icon-postcard"></i>
        <span slot="title">论坛管理</span>
      </el-menu-item>
      <el-menu-item index="/infoManagement">
        <i class="el-icon-edit"></i>
        <span slot="title">招聘管理</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
  <el-main>
    <router-view></router-view>
  </el-main>
</el-container>
</template>

<script>
export default {
  data () {
    return {
      isCollapse: false,
      activeIndex: ''
    }
  },
  methods: {
    toggleCollapse () {
      this.isCollapse = !this.isCollapse
    }
  }
}
</script>

<style lang="less" scoped>
.analisis-container{
  height: 100%;
}
.el-aside {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 100px;
}
.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  padding: 0 0;
}
.toggle-button {
  background-color: white;
  font-size: 10px;
  line-height: 24px;
  text-align: center;
  letter-spacing: 0.2em;
}
</style>
